@import "../../component/var.scss";

$radius: 20px;

.title {
  font-size: 16px;
  font-weight: 800;
  width: 100%;
  height: 30px;
  margin-bottom: 10px;
}
.red {
  background-color: $red;
}
.purpel {
  background-color: $purpel;
}
.blue {
  background-color: $purpel;
}
.green {
  background-color: $green;
}
.dark {
  background-color: $dark;
}

.home {
  width: 100%;
  height: 95%;

  display: flex;
  .left {
    height: 100%;
    width: 22%;
    display: flex;
    flex-direction: column;

    .top {
      width: 100%;
      height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: $radius;
      p {
        margin-top: 30px;
        font-size: 16px;
        font-weight: 900;
      }
    }

    .part {
      flex: 1;
      width: 100%;
      margin-top: 15px;
      border-radius: $radius;
      padding: 10px 10px;
      ul {
        padding: 10px 0;
        li {
          padding: 8px 12px;
        }
      }
    }
  }
  .main {
    width: 55%;
    margin: 0 15px;
    border-radius: $radius;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    .part {
      flex: 1;
      width: 100%;
      height: 330px;
      padding: 0 10px;
      margin-bottom: 20px;
      .chart {
        width: 100%;
        height: 300px;
        display: flex;
        .item {
          width: 100%;
          height: 100%;
          margin: 0 5px;
        }
      }
    }
  }
  .right {
    width: 23%;
    border-radius: $radius;
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    .apply {
      flex: 1;
      width: 90%;
      box-sizing: border-box;

      margin: 0 auto;

      .app {
        width: 100%;
        height: 60px;
        background: #f46900;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        color: #fffbf9fa;
        cursor: pointer;
      }
    }
    .timeline {
      height: 45%;
      flex: 1;
    }
  }
}
